<template>
    <div class="my-header flex">
        <div class="logo flex">
            <ElIcon size="36" color="#94DF58"><MyIcon name="workbench"></MyIcon></ElIcon>
            <div class="title-box flex-col">
                <div class="text">WorkSpace</div>
                <div class="sub-text">互联互通运维工作台</div>
            </div>
        </div>
        <div class="meun">
            <MyRouteMenu route="home" mode="horizontal" :default-active="routeLevel1"></MyRouteMenu>
        </div>
        <div class="tool flex">
            <ElIcon size="24"><MyIcon name="notice"></MyIcon></ElIcon>
            <div class="spacing"></div>
            <div class="user-box flex">
                <img v-if="loginUser.avatar" :src="loginUser.avatar" class="img-avatar" />
                <ElIcon v-else size="32"><MyIcon name="avatar"></MyIcon></ElIcon>
                <div class="text-box flex-col">
                    <div class="name">{{ loginUser.name }}</div>
                    <div class="role">{{ loginUser.roleName }}</div>
                </div>
            </div>
            <div class="spacing"></div>
            <ElIcon size="24" @click="logout"><MyIcon name="logout"></MyIcon></ElIcon>
        </div>
    </div>
</template>

<script setup lang="ts">
const appStore = MyStore.useApp();
const { routeLevel1, loginUser } = storeToRefs(appStore);
const logout = async () => {
    const res = await MyService.account.logout({ token: MyModule.storage.getItem('token', ''), _: Date.now() });
    if (res.code === 200) {
        MyModule.storage.removeItem('token');
        location.reload()
    }
};

onBeforeMount(async () => {
    const res = await MyService.account.getLoginUser({ _: Date.now() });
    if (res.code === 200) {
        appStore.setUser(res.data);
    }
});
</script>

<style scoped>
.my-header {
    width: 100%;
    height: 60px;
    padding: 0px 24px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
}
.logo {
    height: 100%;
    align-items: center;
    gap: 8px;
}
.title-box .text {
    font-size: 16px;
    font-weight: bold;
}

.title-box .sub-text {
    font-size: 12px;
    color: var(--el-text-color-regular);
}

.meun {
    height: 100%;
    flex: auto;
    padding-left: 160px;
}
.tool {
    height: 100%;
    align-items: center;
}

.tool .spacing {
    width: 1px;
    height: 16px;
    margin: 0px 24px;
    background-color: #c2cbd7;
}
.tool .user-box {
    height: 100%;
    align-items: center;
    gap: 8px;
}

.tool .user-box .text-box {
    gap: 2px;
}

.tool .user-box .text-box .name {
    font-size: 12px;
    color: #000000;
}

.tool .user-box .text-box .role {
    font-size: 10px;
    line-height: 14px;
    height: 14px;
    background: #94df58;
    color: #e6ffffff;
    padding: 0px 4px;
    align-self: start;
}
.tool .user-box .img-avatar {
    height: 32px;
    width: 32px;
    border-radius: 16px;
    object-fit: contain;
}
</style>
